<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" size="small" @click="addModalDialog = true">
        添加
      </el-button>
    </div>
    <el-table
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="序号" width="95">
        <template slot-scope="scope">
          {{ scope.$index+1 }}
        </template>
      </el-table-column>
      <el-table-column label="角色"  align="center">
        <template slot-scope="scope">
          {{ scope.row.title }}
        </template>
      </el-table-column>
      <el-table-column label="描述"  align="center">
        <template slot-scope="scope">
          {{ scope.row.label }}
        </template>
      </el-table-column>
      <el-table-column label="授权"  align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="mini">菜单</el-button>
          <el-button type="primary" size="mini">项目</el-button>
          <el-button type="primary" size="mini">资产</el-button>
        </template>
      </el-table-column>
      <el-table-column  align="center" label="Action" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="editClick(scope.row.id,scope.$index)">
            编辑
          </el-button>
          <el-button size="mini" type="danger"  @click="deleteRole(scope.row.id,scope.$index)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--模态框-->
    <el-dialog title="添加" width="35%" :visible.sync="addModalDialog">
      <el-form :model="form">
        <el-form-item label="角色名称" >
          <el-input v-model="form.title" placeholder="请输入角色名称"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" >
          <el-input v-model="form.label" placeholder="角色描述" ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addModalDialog = false">取 消</el-button>
        <el-button type="primary"  @click="createRole">提交</el-button>
      </div>
    </el-dialog>

    <!--模态框-->
    <el-dialog title="修改" width="35%" :visible.sync="editModalDialog">
      <el-form :model="edit_form">
        <el-form-item label="角色名称" >
          <el-input v-model="edit_form.title" placeholder="请输入角色名称"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" >
          <el-input v-model="edit_form.label" placeholder="角色描述" ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editModalDialog = false">取 消</el-button>
        <el-button type="primary"  @click="updateRole">提交</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import request from '@/utils/request'
let baseUrl = process.env.VUE_APP_BASE_URL

export default {
  //定义数据
  data() {
    return {
      list: null,
      addModalDialog : false,
      editModalDialog : false,
      edit_id:null,
      edit_index:null,
      form: {
        title: '',
        label: '',
      },
      edit_form: {
        title: '',
        label: '',
      },
    }
  },
  created() {
    //页面加载后执行函数
    this.getRoles()
  },
  methods: {
    //请求数据
    getRoles() {
      //获取角色列表
      request({
        url:baseUrl+'/roles/',
        method: 'get',
      }).then(ret => {
        this.list = ret.data
      })
    },
    //添加
    createRole(){
      this.addModalDialog=false,
        request({
          url:baseUrl+'/roles/',
          method: 'post',
          data:this.form
        }).then(ret => {
          //添加成功后加入到数组中展示
          this.list.splice(this.list.length,0,ret.data)
          this.$notify({
            title: 'SUCCESS',
            message: '添加成功',
            type: 'success'
          })
         //添加后初始化form值
          this.form = {title: '', label: ''}
        }).catch(err => {
          this.$notify.error({
            title: 'ERROR',
            message: err,
          })
      })
    },
    //删除
    deleteRole(id,index){
      //删除后移除数组中数据
      this.list.splice(index,1)
      request({
          url:baseUrl+'/roles/'+id+'/',
          method: 'delete',
      }).then(ret => {
        this.$notify({
          title: 'SUCCESS',
          message: '已删除',
          type: 'success'
        })

      }).catch(err => {
        this.$notify.error({
          title: 'ERROR',
          message: err,
        })
      })
    },
    //修改
    updateRole(){
      request({
        url:baseUrl+'/roles/'+this.edit_id+'/',
        method: 'put',
        data:this.edit_form
      }).then(ret => {
        //更新后同步数组中数据
        this.$notify({
          title: 'SUCCESS',
          message: '已修改',
          type: 'success'
        })
        this.list.splice(this.edit_index,1,ret.data)
        this.editModalDialog =false
      }).catch(err => {
        this.$notify.error({
          title: 'ERROR',
          message: err,
        })
      })
    },
    //点击编辑显示编辑对话框
    editClick(id,index){
      this.editModalDialog =true
      this.edit_form = this.list[index]
      this.edit_id = id
      this.edit_index = index
    }
  }
}
</script>
<style>
  .filter-container {
      padding-bottom: 10px;
  }
</style>
